<template>
	<view class="ownerlist">
		<swiper class="swiper" :autoplay="true" :interval="3000" :vertical="true" :circular="true"
			>
			<swiper-item v-for="(item,index) in list" :key="index">
				
		<view class="owner" v-for="(item,index) in list" :key="index" @click="tourl('/pages/appointment/waiterInfo?id='+item.id)">
			<view class="img" >
				<image :src="item.profilePhoto" mode="aspectFill" class="image"></image>
				<image v-if="item.newStaff==1"
				src="@/static/home/homelist/xrz.png" mode="widthFix" class="tipimg"></image>
				<image v-if="item.monthStar==1"
				src="@/static/home/homelist/byzx.png" mode="widthFix" class="tipimg"></image>
			</view>
			<view class="txt">
				<view class="name">
					<text>{{item.name || "小程序用户"}}</text>
					 
					<!-- 未收藏 -->
					<image v-if="item.isCollect==0" @click.stop="handleCollect('create',item,index)"
					src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
					<!-- 收藏 -->
					<image v-else @click.stop="handleCollect('delete',item,index)"
					src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
					<image v-if="item.isCoupon==1" src="@/static/home/homelist/yhj.png" mode="widthFix"></image>
					 <text>{{item.nativePlace || "未知"}}</text>
				</view>
				<view class="tip" v-if="item.workTags">
					<text class="text" v-for="it in item.workTags.split(',')" :key="it">
						{{it}}
					</text> 
				</view>
				<view class="tip">
					<text class="text2">{{item.age}}岁｜总接单 {{item.orderNum}}｜粉丝 {{item.fansNum}}｜评价 {{item.evaluateNum}}</text>
					 
				</view>
				<view class="tip">
					<image v-if="item.trainingCertification==1" src="../static/home/homelist/pxrz.png" mode="widthFix"></image>
					<image v-if="item.withTools!=0" src="../static/home/homelist/zdgj.png" mode="widthFix"></image>
				</view>
			</view>
		
			<view class="appointment">
				<view class="time" v-if="item.status==1">
					<view class="t1">最早可约 </view>
					<view class="t2">{{item.startTime  }}</view>
				</view>
				<view class="time" v-if="item.status==0">
					<view class="t1" style="background-color: #AAAAAA;border:1rpx solid #AAAAAA;">最早可约 </view>
					<view class="t2" style="color: #AAAAAA;border:1rpx solid #AAAAAA;">休息中</view>
				</view>
				<view class="address">
					{{roundDistance(item.distance)}}km
				</view>
			</view>
			
			<image v-if="item.served==1"
			src="@/static/home/homelist/fwg.png" mode="widthFix" class="servedimg"></image>
		
		</view>
	
		</swiper-item>
		</swiper>
	</view>
	
</template>

<script>
	import {staffscAPI} from "@/api/home.js"
	export default {
		name:"home-list",
		data() {
			return {
				list: [ ],
			};
		},
		created() {
			
		},
		methods:{
			roundDistance(distance) {
				if(distance){
					return Math.round(distance * 10) / 10; // 保留一位小数
				}
				return '-'
			},
			handleCollect(url,item,index){
				 
				staffscAPI(url,{
					staffId:item.id
				}).then(res=>{
					console.log(res)
					this.$set(this.list[index],'isCollect',url=='create'? '1':'0')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ownerlist{
	// padding: 10rpx; 
	.swiper{
		height: 500rpx;
	}
	.owner{
		display: flex;
		background-color: #fff;  
		border-radius:20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.img{
			position: relative;
			width: 160rpx;
			height: 200rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx; 
			background-color: #f1f1f1;
			.image{
				border-radius: 20rpx;
				height: 200rpx; 
				width: 100%;
			}
			.tipimg{
				position: absolute;
				left: 0;
				bottom: 20rpx;
				width: 128rpx;
				height: 40rpx;
			}
		}
		.txt{
			padding: 5rpx 2rpx;
			flex: 1;
			.name{
				font-weight: bold;
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin: 0 15rpx;
				} 
			}					 
			.tip{
				display: flex;
				align-items: center; 
				flex-wrap: wrap;
				margin-top: 15rpx;
				.text{
					padding: 8rpx 12rpx; 
					background: #F5F5F5;
					border-radius:4rpx;
					margin: 5rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 23rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				image{
					width: 128rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.appointment{
			width: 110rpx;
			.time{
				
				height: 88rpx;
				border-radius: 12rpx;
				text-align: center;
				 width: 110rpx;
				 box-sizing: border-box;
				 display: flex;
				 flex-direction: column;
				 align-items: center;
				 justify-content: center;
				.t1{
					width: 100%;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 43rpx;
					text-align: center; 
					background: #277EEF;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
					border: 1rpx solid #277EEF;
					margin:0 ;
					padding: 0;
				}
				.t2{
					width: 100%;
					font-weight: bold;
					font-size: 20rpx;
					color: #277EEF;
					line-height: 43rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					border-radius:0rpx 0rpx 12rpx 12rpx ;
					border: 1rpx solid #277EEF;
				}
			}
			.address{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
				text-align: center;
				 
			}
		}
		
		.servedimg{
			width: 116rpx;
			height: 116rpx;
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
}
</style>